<!-- 音标专练列表 -->

<template>
    <AppHeader title="看一看" :banAnimate="true"  backgroundColor="#ffffff">
      <template #left>
        <img @click="onClickLeft" src="@/assets/phoneticPractice/返回图标@3x.png" width="9" height="18" />
      </template>
    </AppHeader>
    <div class="container">
      <div class="container-height"></div>
      <div v-for="item in taskLookList" :key="item.id" class="container-list" @click="goDetail(item)" >
    
        <img :src="item.image" >
        <div class="container-list-context">
            <div>{{ item.name }}</div>
            <div>{{ item.create_time_text }}</div>
        </div>
    
    </div>
      
  
  
    </div>
  </template>
  
  <script setup>
  
  import { useRouter } from 'vue-router'
  import AppHeader from '@/components/AppHeader.vue'
  import { onMounted, reactive, toRefs } from 'vue'
  import { request } from "@/api/request";
  import { useRoute } from 'vue-router'
  const route = useRoute()
  
  const state = reactive({
        taskLookList:[]
      });
  onMounted(async () => {
    if(route.query.token){//安卓ios跳转token放在路由上
      localStorage.setItem("h5-token", route.query.token);
    }
    state.taskLookList = await getList();
  })
  
  
  const getList = async () => {
    const res = await request({
      url:'https://d-xueer.bigchun.com/api/look/getLookList',
      method:'get'
    })
    if (res.code == 1) {
      return res.data.data
    } 
    
  }
  
  
  
  const router = useRouter()
  const goDetail = (item) => {
    router.push({
      path: './detail',
      query: {
        look_id:item.id,
        name:item.name,
        desc:item.desc,
        create_time_text:item.create_time_text,
      }
    })
  }
  const onClickLeft = () => {
    router.go(-1)
  }
  
  const {taskLookList} = toRefs(state)
  console.log(taskLookList);
  
  </script>
  
  <style scoped lang="scss">
  .container {
    width: 100%;
    // height: 100vh;
    display: flex;
    flex-direction: column;
    
    .container-height{
      height: 44px;
    }
    .container-list{
        height: 90px;
        display: flex;
        font-size: 14px;
        color: #8E8E8E;
        padding-bottom: 16px;
        border-bottom: 1px solid #E5E5E5;
        img{
            width: 100px;
            height: 75px;
            border-radius: 10px;
            margin: 10px 10px 0 10px;
        }
        .container-list-context{
            display: flex;
            flex-direction: column;
            justify-content: center;
            div:nth-child(1){
                margin-bottom: 10px;
                color: #333333;
                font-size: 16px;
                font-weight: bold;
            }
        }
    }
   
  }
  </style>
  